<template>
  <div class="cov-info">
    <div class="cov">
      <div class="title">疫情信息</div>
      <p>
        新型冠状病毒肺炎,世界卫生组织命名为“2019冠状病毒病”,是指2019新型冠状病毒感染导致的肺炎。
      </p>
      <p>
        新型冠状病毒肺炎以发热、干咳、乏力等为主要表现，少数患者伴有鼻塞、流涕、腹泻等上呼吸道和消化道症状。
      </p>
      <p>
        新冠肺炎传播途径主要为直接传播、气溶胶传播和接触传播。直接传播是指患者喷嚏、咳嗽、说话的飞沫，呼出的气体近距离直接吸入导致的感染；气溶胶传播是指飞沫混合在空气中，形成气溶胶，吸入后导致感染.
      </p>
    </div>
    <div class="hot">
      <img src="@/assets/img/hot.png" alt="" class="hot-new" />
      <XRouterlink  v-for="item in covNew" :key="item.id" :to="{path:item.sourceUrl}">
        <template>
        <div class="newest">
          <div class="zuixin"><span>最新</span></div>
          <div class="newtitle">{{item.title}}</div>
          <img class="icon" src="@/assets/img/rig-arr.png">
          </div>
          </template>
        </XRouterlink>
      </div>
    </div>
</template>

<script>
import XRouterlink from "../../../components/XRouterlink.vue";
export default {
  name: "CovInfo",
  components:{
    XRouterlink
  },
  props: {
    covNew: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
};
</script>

<style lang="less" scoped>
.cov-info {
  padding: 0.2rem 0.25rem 0.1rem;

  .title {
    border-left: 0.1rem solid #4169e2;
    padding: 0.08rem 0.1rem;
    font-size: 0.34rem;
  }
  p {
    margin: 0.15rem 0.07rem;
    color: #666;
    font-size: 0.3rem;
    text-indent: 2em;
  }
}
.hot {
  .hot-new {
    border-left: 0.1rem solid #4169e2;
    padding-left: 0.1rem;
    width: 1.5rem;
    margin: 0.2rem 0;
  }
  .newest {
    display: flex;
    align-items: center;
    margin: 0 0 0.35rem 0.1rem;
    position: relative;
    .zuixin {
      background-color: #f74c31;
      color: #fff;
      font-size: 0.24rem;
      padding: 0.03rem;
      margin-right: 0.1rem;
      line-height: 0.27rem;
    }
    .newtitle {
      font-size: 0.3rem;
      padding: 0 0.05rem;
    }
    .icon {
      position: absolute;
      right: 0;
      width: 0.26rem;
    }
  }
}
</style>